import styles from "./index.module.less"
import FilterForm from "../../components/FilterForm"
import type { FormConfig } from "../../components/DynamicForm"
import { useSearchQuery, useUserColumns, mockGetData } from "./data"
import { useCallback, useRef, useState } from "react"
import { Button, Form, Tag, type FormInstance } from "antd"
import TablePlus from "../../components/TablePlus"
import { DeleteOutlined, ExportOutlined } from '@ant-design/icons';
type Props = {}

interface User {
  name: string
  email: string
  phone: string
  type: { name: string }
  roles: { id: string | number; name: string }[]
}

const DemoPage = (props: Props) => {
  const formSchema = useSearchQuery()
  const [form] = Form.useForm();
  const [isFormCollapsed, setIsFormCollapsed] = useState(true);
  const [searchValues, setSearchValues] = useState<Record<string, unknown> | undefined>(undefined);
  const columns = useUserColumns((key: string, record: User) => {
    console.log(key, record)
  });
  const handleSubmit = (values: any) => {
    setSearchValues(values)
  }
  const handleReset = () => {
    console.log('表单重置')
  }

  const handleCollapseChange = (collapsed: boolean) => {
    setIsFormCollapsed(collapsed);
  }

  const handleValuesChange = (values: Record<string, unknown>) => {
    console.log('Form values changed:', values); // 打印表单值变化
  };

  const formConfig: FormConfig = {
    items: formSchema,
    onSubmit: handleSubmit,
    onReset: handleReset,
    defaultShowCount: 2,
    collapsed: isFormCollapsed,
    layout: 'horizontal', // 标签对齐方式
    submitText: '搜索',
    resetText: '重置',
    form: form,
    onCollapseChange: handleCollapseChange, // 添加折叠状态变化回调
    itemsPerRow: 3, // 配置每行显示4个表单项
    onValuesChange: handleValuesChange, // 添加表单值变化回调
    actionColSpan: 8, // 操作按钮列宽度，默认为6
  }

  const fetchData = useCallback(mockGetData, []);

  return (
    <div className={styles.wrapper}>
      <FilterForm
        formConfig={formConfig} ></FilterForm>

      <div>
        <TablePlus
          toolBarRender={() => {
            return <Button type='primary'>自定义Tool</Button>
          }}
          rowKey='name'
          params={searchValues}
          options={{
            print: {
              show: true,
              onClick: () => {
                alert("print")
              }
            },
            outPut: {
              show: true,
              onClick: () => {
                alert("outPut")
              }
            },
            batch: {
              onClick: (rows, key) => {
                alert(`点击了${key}按钮，选中行数：${rows.length}`)
              },
              dropDownOptions: [
                {
                  label: '批量删除',
                  key: 'batchDelete',
                  icon: <DeleteOutlined />
                },
                {
                  label: '批量导出',
                  key: 'batchOutput',
                  icon: <ExportOutlined />
                }
              ]
            }
          }} style={{ width: 1440 }} scroll={{ x: 1440, y: 400 }} pagination={
            {
              pageSize: 10,
            }
          } columns={columns} request={fetchData} />
      </div>
    </div>
  )
}

export default DemoPage